<template lang="html">
  <div class="index-recommended">
    <h4>为您推荐 :</h4>
    <div class="index-recommended-container clear-fix">
      <div
      class="index-recommended-item"
      v-for='(item,index) in RecommendedData'
      :key='index'>
        <div class="index-recommended-pic">
          <img :src="item.imgs" alt="">
        </div>
        <div class="index-recommended-text">
          <p>{{ item.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:"IndexRecommended",
  props:{
    RecommendedData:{
      type:Array,
      fefault:function(){
        return []
      }
    }
  }
}
</script>

<style lang="less" scoped>

.index-recommended{
  padding: 0.2rem;
  box-sizing: border-box;
  background-color: #fff;
  h4{
    font-size: 0.24rem;
    margin-bottom: 0.14rem;
    font-weight: normal;
  }
  .index-recommended-container{
    padding: 0 0.45rem;
    box-sizing: border-box;
    .index-recommended-item{
      float: left;
      margin-bottom: 0.3rem;
      &:nth-child(2n){
        margin-left: 0.2rem;
      }
      .index-recommended-pic{
        img{
          width: 3rem;
          height: 1.35rem;
        }
      }
      .index-recommended-text{
        p{
          text-align: center;
          font-size: 0.24rem;
          margin-top: 0.14rem;
        }
      }
    }
  }
}

</style>
